<template>
	<view class="login">
		<view class="login_form">
			<view class="loginInfo">
			<view class="title">欢迎登录</view>
			<image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
			</view>
			<up-form :rules="rules" :model="store.form" errorType="message" ref="loginFormRef" >
				<up-form-item
						prop="username"
						borderBottom="true"
						ref="item1"
						label-width="0px"
				>
					<up-input
							v-model="store.form.username"
							border="none"
							placeholder="请输入账号"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="password"
						borderBottom="true"
						ref="item2"
						label-width="0px"
				>
					<up-input
							v-model="store.form.password"
							type="password"
							border="none"
							placeholder="请输入密码"
							clearable
					></up-input>
				</up-form-item>
			</up-form>
			<view class="form_bottom">
				<view class="register" @click="store.register()">点击注册</view>
				<view class="find_pwd" @click="store.pwd()">找回密码</view>
			</view>
			<up-button class="login_button" type="primary" text="登录" color="#000033" @click="submit()"></up-button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive,ref} from 'vue';
import useloginStore from '../../store/login';
import useHomeStore from '../../store/home';
const store=useloginStore()
const homeStore=useHomeStore()
const loginFormRef = ref(null);
onMounted(()=>{
	homeStore.startLocation()
	store.hospital()
})
const submit=()=>{
	  loginFormRef.value.validate().then(valid => {  
	    if (valid) {
			store.login()
	    } else {  
	      uni.$u.toast('输入格式错误')
	    }  
	  }).catch(() => {  
	  });  
}
const rules=reactive({
	username:{
		type: 'string',
		required: true,
		message: '账号不能为空',
		trigger: ['change']
	},
	password:{
		type: 'string',
		required: true,
		message: '密码不能为空',
		trigger: ['change']
	}
})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.login{
	width: 750rpx;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background-color: #F7F7F7;
}
.title{
	font-size: 40rpx;
	margin-left: 120rpx;
	font-weight: 700;
}
.login_form{
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	background-color: white;
	border-radius: 40rpx;
	height: 800rpx;
	padding: 40rpx;
}
.login_button{
	margin-top: 30rpx;
}
.form_bottom{
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #ccc;
	margin-top: 10rpx;
}
.register:active{
	color: deepskyblue;
}
.find_pwd:active{
	color: deepskyblue;
}
.logo{
	width: 100rpx;
	height: 100rpx;
	margin-left: 50rpx;
}
.loginInfo{
	display: flex;
	align-items: center;
	background-color: white;
}
</style>
